<script setup lang="ts">
import Copy from '@iconify-icons/ep/copy-document'
import Check from '@iconify-icons/ep/check'
import { useClipboard } from '@vueuse/core'
import { useRenderIcon } from '../ReIcon/src/hooks'

const props = defineProps<{
  content: string
}>()

const { copy, copied } = useClipboard({ legacy: true })
</script>

<template>
  <p class="inline-flex items-center gap-2">
    <span>{{ content }}</span>
    <el-tooltip :visible="copied" content="已复制" placement="top">
      <button
        class="text-primary bg-transparent"
        :class="{
          'text-success': copied,
        }"
        @click="copy(content)"
      >
        <component :is="useRenderIcon(copied ? Check : Copy)" />
      </button>
    </el-tooltip>
  </p>
</template>
